<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 130px;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
       // 每次走 剩下距离的十分之一   总是差0.9到达目标
       // 比如当前值时 81      目标100
       // (100-81)/10  1.9 
       // 元素走1.9的距离 需要把 81+1.9给到元素
       // 82.9   目标100 
       // (100-82.9)/10 1.71
       // 元素走 1.71   需要 82.9+1.71
       // 还是小数  
       // 到达不了目标 

       
       // 解决方案 :取整 
       //  向上还是向下 

       // 向上取整 
       // 往负方向走  -1.9 向上取整 -1 又回退了

       // 总结 运动的距离大于0  向上取整  
       // 小于0 向下取整 
        function sport(ele, mystyle, target) {
            // 获取元素 当前的  样式
            
            const num = setInterval(function () {
                // 放到定时器里边 就可以拿到它新的位置  
                let init = parseInt(window.getComputedStyle(ele)[mystyle]);
                // 记录新的运动距离
                let duration = (target-init)/10;//记录的是本次运动的距离
                duration = duration>0?Math.ceil(duration):Math.floor(duration)
                // console.log(duration);
                if (init === target) {
                    clearInterval(num);
                }else{
                    ele.style[mystyle] = init+duration+'px';
                }
            }, 30);
        }

        var divele = document.querySelector('div');
        divele.onclick = function () {
            sport(this,'left',501);
            // sport(this, 'width', 501);

        }

    </script>
</body>

</html>